<template style="width: 100%; height: 100%;">
    <div class="fixed-container">
        <div class="container">
            <div class="header-container">
                <WindowTitleBar v-bind:title="title or '消息框'"></WindowTitleBar>
            </div>
            <div class="body-container">
                <div style="font-size: 20px">
                    {{text or ""}}
                </div>
            </div>
            <div class="footer-container">
                <div onclick=ClickConfirmBtn class="btn center confirm-btn">确定</div>
                <div onclick=ClickCancelBtn class="btn center cancel-btn">取消</div>
            </div>
        </div>
    </div>
</template>

<script type="text/lua">
RegisterComponent("WindowTitleBar", "%vue%/Components/WindowTitleBar.html");

function ClickConfirmBtn()
    if (type(_G.confirm) == "function") then _G.confirm() end
    CloseWindow();
end

function ClickCancelBtn()
    if (type(_G.cancel) == "function") then _G.cancel() end
    CloseWindow();
end 
</script>

<style scoped=true>
.fixed-container {
    position: fixed;
    top: 10%;
    left: 10%;
    right: 10%;
    bottom: 10%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 1px solid #ff0000; */
}

.container {
    height: 250px; 
    width: 500; 
    padding: 0px 2px 2px 2px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: url(Texture/Aries/Creator/keepwork/Window/dakuang_32bits.png#0 0 440 93:378 43 33 44);
}

.header-container {
    height: 40px;
    width: 100%;
}

.body-container {
    position: absolute;
    top: 40px;
    left: 10px;
    right: 10px;
    bottom: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-container {
    height: 80px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.btn {
    width: 100px;
    height: 40px;
    background-color: #cccccc;
}

.confirm-btn {
    background: url(Texture/Aries/Creator/keepwork/Window/button/btn_huangse_32bits.png#0 0 38 64:16 16 16 16);
}

.cancel-btn {
    background: url(Texture/Aries/Creator/keepwork/Window/button/btn_huise_32bits.png#0 0 38 64:16 16 16 16);
}
</style>
